<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
  <link rel="stylesheet" href="../css/public.css" media="all">
  <style>
    .pane_info{
      padding: 15px;
      box-sizing: border-box;
    }
    .pane_table{
       margin-bottom: 10px;
    }
    .pane_table .label{
        width: 110px;
        height: 38px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #FBFBFB;
        border: 1px solid #eee;
    }
  </style>
</head>
<body>
<div class="layuimini-container">
  <div class="layuimini-main">

    <fieldset class="table-search-fieldset">
      <legend>搜索信息</legend>
      <div style="margin: 10px 10px 10px 10px">
        <form class="layui-form layui-form-pane" action="">
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">角色名称</label>
              <div class="layui-input-inline">
                <input type="text" name="roleName" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">角色编号</label>
              <div class="layui-input-inline">
                <input type="text" name="roleno" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-inline">
              <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
            </div>
          </div>
        </form>
      </div>
    </fieldset>

    <script type="text/html" id="toolbarDemo">
      <div class="layui-btn-container">
        <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加 </button>
        <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除 </button>
      </div>
    </script>

    <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
    <script type="text/html" id="currentTableBar">
      <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
      <a class="layui-btn layui-btn-warm layui-btn-xs data-count-menu" lay-event="menu">授权菜单</a>
      <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
    </script>

  </div>
</div>
<!--更新-->
<script type="text/html" id="data_operation">
  <div class="pane_info">
    {{#  if(!d.edit){ }}
    <div class="disabled_pane"></div>
    {{#  } }}
    <form class="layui-form layui-form-pane" action="" lay-filter="demo-lay-filter-datainfo">
      {{#  if(d.roleId){ }}
      <input type="hidden"  name="roleId" value="{{d.roleId}}" >
      {{#  } }}
      <div class="layui-form-item">
        <label class="layui-form-label">角色名称</label>
        <div class="layui-input-block">
          <input type="text" name="roleName" required  lay-verify="required" value="{{d.roleName}}" autocomplete="off" placeholder="请输入菜单名称" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">角色编号</label>
        <div class="layui-input-block">
          <input type="text" name="roleno" required  lay-verify="required" value="{{d.roleno}}" autocomplete="off" placeholder="请输入菜单名称" class="layui-input">
        </div>
      </div>
    </form>
  </div>
</script>

<!--授权菜单-->
<script type="text/html" id="data_operation_menu">
  <div class="pane_info">
<!--    <div class="pane_table">-->
<!--      <div class="label">-->
<!--        授权角色-->
<!--      </div>-->
<!--      <div class="item">-->

<!--      </div>-->
<!--    </div>-->
    <form class="layui-form layui-form-pane" action="">
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">菜单名称</label>
          <div class="layui-input-inline" style="width: 350px">
            <input type="text" name="name" autocomplete="off" class="layui-input" width="300px">
          </div>
        </div>
        <div class="layui-inline">
          <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-tree-btn"><i class="layui-icon"></i> 搜 索</button>
        </div>
      </div>
    </form>
    <div id="test_menu_select_id" class="demo-tree-more"></div>
  </div>
</script>


<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../js/jquery-3.7.1.min.js"></script>
<script src="../js/crypto-js.min.js"></script>
<script src="../js/common.js"></script>
<script src="/lay/t-secrypt-script.js"></script>
<script>
  layui.use(['form', 'table','laytpl','tree'], function () {
    var $ = layui.jquery,
            form = layui.form,
            table = layui.table;
    var tree = layui.tree;
    var laytpl = layui.laytpl; //模版

    let treeData=[];
    let selectRoleId=null;
    table.render({
      elem: '#currentTableId',
      method:'POST',
      url: '/role/page',
      toolbar: '#toolbarDemo',
      contentType:'application/json',
      request: {
        pageName: 'pageNum' //页码的参数名称，默认：page
        ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
      },
      defaultToolbar: ['filter', 'exports', 'print', {
        title: '提示',
        layEvent: 'LAYTABLE_TIPS',
        icon: 'layui-icon-tips'
      }],
      cols: [[
        {type: "checkbox", width: 50},
        {field: 'roleId', width: 180, title: 'ID', sort: true},
        {field: 'roleName', width: 180, title: '角色名称'},
        {field: 'roleno', width: 180, title: '角色编号', sort: true},
        {field: 'createTime', width: 180, title: '创建时间'},
        {title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
      ]],
      limits: [10, 15, 20, 25, 50, 100],
      limit: 15,
      page: true,
      skin: 'line'
    });

    // 监听搜索操作
    form.on('submit(data-search-btn)', function (data) {
      var result = JSON.stringify(data.field);
      //执行搜索重载
      table.reload('currentTableId', {
        page: {
          curr: 1
        }
        , where: {
          search: data.field
        }
      }, 'data');
      return false;
    });

    /**
     * toolbar监听事件
     */
    table.on('toolbar(currentTableFilter)', function (obj) {
      if (obj.event === 'add') {  // 监听添加操作
        let initData={ roleName:"名字",roleno:"roleno" };
        add(initData);
      } else if (obj.event === 'delete') {  // 监听删除操作
          var checkStatus = table.checkStatus('currentTableId')
                  , data = checkStatus.data;
          if(data.length==0){
            return layer.msg('未选择数据', {icon: 0});
          }
          let arr=[];
          for (let i = 0; i < data.length ; i++) {
            let o=data[i];
            arr.push(o.roleId+'');
          }
          layer.confirm('真的删除选中数据吗', function (index) {
            layer.close(index);
            del(arr);
          })
      }
    });

    //监听表格复选框选择
    table.on('checkbox(currentTableFilter)', function (obj) {
      console.log(obj)
    });



    table.on('tool(currentTableFilter)', function (obj) {
      var data = obj.data;
      if (obj.event === 'edit') {
        update(data);
        return false;
      }else if(obj.event === 'menu'){
        selectRoleId=data.roleId;
        menu(data);
        return false;
      } else if (obj.event === 'delete') {
        layer.confirm('真的删除'+data.roleName+'角色吗', function (index) {
          layer.close(index);
          let arr=[];
          arr.push(data.roleId+'')
          del(arr);
        });
      }
    });

    function addTreeFormSearch(){
      form.on('submit(data-search-tree-btn)', function (data) {
        let d=data.field;
        layutils.ajaxGet('/menu/gettreesearch?name='+d.name,null,function (e){
            if(e.code==200){
              treeData=e.data;
              if(treeData && treeData.length>0){
                //让节点展开
                layutils.addPropertyTreeData(treeData,'children','spread',true);
                console.log(treeData)
                menuTreeRender();
                getCheckedMenuIds();
              }
            }
        })
        return false;
      });
    }

    //菜单操作
    function menu(data){
      templateRender('data_operation_menu',data,function (html){
        getTreeData();
        layerFullPage('菜单授权',html,data,function (index){
            layer.close(index);
            var checkedData = tree.getChecked('test_menu_select_id'); // 获取选中节点的数据
        //    let nodes=lay.getLeafNodes(checkedData,'children');
            let obj={roleId:selectRoleId,list:checkedData};
            layutils.ajaxJsonPost('/sysrolemenu/save',JSON.stringify(obj),function (e){
               if(res.code==200){
                  layer.msg(res.message, {icon: 1},function (){
                    layer.close(index);
                  });
                }else {
                  layer.msg(res.message, {icon: 2});
                }
            });
        })
        addTreeFormSearch();
      })
    }



    //菜单树渲染
    function menuTreeRender() {
      //无连接线风格
      tree.render({
        elem: '#test_menu_select_id'
        ,id:'test_menu_select_id'
        , data: treeData
        , onlyIconControl: true // 是否仅允许节点左侧图标控制展开收缩
        ,showCheckbox: true
      });
    }

    //获取tree数据
    function getTreeData(){
      var loading = layer.load('Loading...', {
        shade: [0.1, '#fff'] // 设置遮罩层的透明度和颜色
      });
      layutils.ajaxGet('/menu/gettreelist',{},function (res){
        if(res && res.code===200){
          treeData=res.data;
          layer.close(loading);
          if(treeData && treeData.length>0){
              //让节点展开
              layutils.addPropertyTreeData(treeData,'children','spread',true);
              console.log(treeData)
          }
          menuTreeRender();
          getCheckedMenuIds();
        }
      })
    }
    //获取选中的菜单数据
    function getCheckedMenuIds(){
        let data={id:selectRoleId}
        layutils.ajaxJsonPost('/sysrolemenu/getcheckids',JSON.stringify(data),function (e){
            if(e.code==200){
              tree.setChecked('test_menu_select_id', e.data); // 勾选对应 id 值的节点
            }
        })
    }



    function add(data){
      data.edit=true;
      templateRender('data_operation',data,function (html){
        layerPage('添加操作',html,data,'50%','70%',function (index){
          let json = form.val('demo-lay-filter-datainfo');
          layutils.ajaxJsonPost('/role/addorupdate',JSON.stringify(json),function (res){
            if(res.code==200){
              layer.msg(res.message, {icon: 1},function (){
                layer.close(index);
              });
              table.reload('currentTableId');
            }else {
              layer.msg(res.message, {icon: 2});
            }
          })
        })
      })
    }

    function del(ids){
      let idData={ids:ids};
      layutils.ajaxJsonPost('/role/delete',JSON.stringify(idData),function (res){
        if(res.code==200){
          layer.msg(res.message, {icon: 1});
          table.reload('currentTableId');
        }else {
          layer.msg(res.message, {icon: 2});
        }
      });
    }

    function update(data){
      data.edit=true;
      templateRender('data_operation',data,function (html){
        layerPage('修改操作',html,data,'50%','70%',function (index){
          let json = form.val('demo-lay-filter-datainfo');
          layutils.ajaxJsonPost('/role/addorupdate',JSON.stringify(json),function (res){
            if(res.code==200){
              layer.msg(res.message, {icon: 1},function (){
                layer.close(index);
              });
              table.reload('currentTableId');
            }else {
              layer.msg(res.message, {icon: 2});
            }
          })
        })
        form.render();
      })
    }


    //模板渲染
    function templateRender(templateId,data,callback){
      var getTpl = $('#'+templateId).html();
      laytpl(getTpl).render(data, function(html){
        callback(html);
      });
    }
    //操作弹窗
    function layerPage(title,html,data,width,height,callback){
      let index=layer.open({
        type: 1
        ,title: title
        ,maxmin:true
        ,area: [width, height]
        ,content: html
        ,btn: ['确认', '取消']
        ,yes: function(){
          callback(index);
        }
        ,btn2: function(){
          layer.close(index);
        }
      });
    }

    function addClickById(id,callback){
      let id_='#'+id;
      $(id_).click(function (e){
        callback(e);
      });
    }
    //操作弹窗，充满整页
    function layerFullPage(title,html,data,callback){
      let index=layer.open({
        type: 1
        ,title: title
        ,shade: 0.2,
      //  maxmin:true,
        shadeClose: true,
        area: ['100%', '100%']
        ,content: html
        ,btn: ['确认', '取消']
        ,yes: function(){
          callback(index);
        }
        ,btn2: function(){
          layer.close(index);
        }
      });
    }
  });
</script>

</body>
</html>